<form nz-form nzLayout="vertical" #createOrEditModalForm="ngForm" (ngSubmit)="save()" autocomplete="off">
    <div class="modal-header">
        <div class="modal-title">
            <i nz-icon nzType="user" class="mr-sm"></i>
            <span *ngIf="userId">{{"EditUser" | localize}}: {{user.userName}}</span>
            <span *ngIf="!userId">{{"CreateNewUser" | localize}}</span>
        </div>
    </div>

    <fieldset>
        <nz-tabset>
            <nz-tab [nzTitle]="userInfoTabTitleTpl">
                <ng-template #userInfoTabTitleTpl>
                    <i nz-icon nzType="user"></i>{{'UserInformations' | localize}}
                </ng-template>
                <nz-row>
                    <nz-col nzSpan="6" class="text-center">
                        <img src="{{profilePicture}}" width="128" height="128" class="img-thumbnail img-rounded" />
                    </nz-col>
                    <nz-col nzSpan="18" class="pl-lg">
                        <nz-form-item>
                            <nz-form-label nzFor="Name" nzRequired>
                                {{"Name" | localize}}
                            </nz-form-label>
                            <nz-form-control [nzErrorTip]="nameValidationTpl" nzHasFeedback>
                                <input nz-input #nameInput="ngModel" name="name" [(ngModel)]="user.name"
                                    placeholder="{{'Name' | localize}}" required maxlength="32">
                                <ng-template #nameValidationTpl let-control>
                                    <validation-messages [formCtrl]="control"></validation-messages>
                                </ng-template>
                            </nz-form-control>
                        </nz-form-item>
                        <nz-form-item>
                            <nz-form-label nzFor="Surname" nzRequired>
                                {{"Surname" | localize}}
                            </nz-form-label>
                            <nz-form-control [nzErrorTip]="surnameValidationTpl" nzHasFeedback>
                                <input nz-input #surnameInput="ngModel" name="Surname" [(ngModel)]="user.surname"
                                    placeholder="{{'Surname' | localize}}" id="Surname" required maxlength="24">
                                <ng-template #surnameValidationTpl let-control>
                                    <validation-messages [formCtrl]="control"></validation-messages>
                                </ng-template>
                            </nz-form-control>
                        </nz-form-item>
                    </nz-col>
                </nz-row>
                <nz-form-item>
                    <nz-form-label nzFor="emailAddress" nzRequired>
                        {{"EmailAddress" | localize}}
                    </nz-form-label>
                    <nz-form-control [nzErrorTip]="emailAddressValidationTpl" nzHasFeedback>
                        <input nz-input #emailAddressInput="ngModel" name="emailAddress" [(ngModel)]="user.emailAddress"
                            placeholder="{{'EmailAddress' | localize}}" id="emailAddress" type="email" required
                            maxlength="256" email>
                        <ng-template #emailAddressValidationTpl let-control>
                            <validation-messages [formCtrl]="control"></validation-messages>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label nzFor="PhoneNumber">
                        {{"PhoneNumber" | localize}}
                    </nz-form-label>
                    <nz-form-control [nzErrorTip]="phoneNumberValidationTpl" nzHasFeedback>
                        <input nz-input #phoneNumberInput="ngModel" name="PhoneNumber" [(ngModel)]="user.phoneNumber"
                            placeholder="{{'PhoneNumber' | localize}}" id="PhoneNumber" maxlength="24">
                        <ng-template #phoneNumberValidationTpl let-control>
                            <validation-messages [formCtrl]="control"></validation-messages>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label nzFor="userName" nzRequired>
                        {{"UserName" | localize}}
                        <em *ngIf="!canChangeUserName">
                            <i nz-icon nzType="info-circle" nz-tooltip [nzTooltipTitle]="l('CanNotChangeAdminUserName')"></i>
                        </em>
                    </nz-form-label>
                    <nz-form-control  [nzErrorTip]="usernameValidationTpl" nzHasFeedback>
                        <input nz-input #userNameInput="ngModel" name="userName" [disabled]="!canChangeUserName"
                            [(ngModel)]="user.userName" placeholder="{{'UserName' | localize}}" required maxlength="32">
                        <ng-container *ngIf="!canChangeUserName">
                            <div class="ant-form-item-extra">{{'CanNotChangeAdminUserName' | localize}}</div>
                        </ng-container>
                        <ng-template #usernameValidationTpl let-control>
                            <validation-messages [formCtrl]="control"></validation-messages>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-control>
                        <label nz-checkbox name="SetRandomPassword"
                            [(ngModel)]="setRandomPassword">{{"SetRandomPassword" | localize}}</label>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item *ngIf="!setRandomPassword">
                    <nz-form-label nzFor="Password" [nzRequired]="!user.id && !setRandomPassword">
                        {{"Password" | localize}}
                    </nz-form-label>
                    <nz-form-control [nzErrorTip]="passwordValidationTpl" nzHasFeedback>
                        <input nz-input type="password" #Password="ngModel" id="Password" name="Password"
                            [(ngModel)]="user.password" placeholder="{{'Password' | localize}}"
                            validateEqual="PasswordRepeat" reverse="true" [required]="!user.id && !setRandomPassword"
                            maxlength="32" [requireDigit]="passwordComplexitySetting.requireDigit"
                            [requireLowercase]="passwordComplexitySetting.requireLowercase"
                            [requireUppercase]="passwordComplexitySetting.requireUppercase"
                            [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                            [requiredLength]="passwordComplexitySetting.requiredLength" validateEqual="PasswordRepeat"
                            reverse="true">
                        <ng-template #passwordValidationTpl let-control>
                            <ul *ngIf="control.errors">
                                <li [hidden]="!control.errors.requireDigit">
                                    {{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                                <li [hidden]="!control.errors.requireLowercase">
                                    {{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                                <li [hidden]="!control.errors.requireUppercase">
                                    {{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                                <li [hidden]="!control.errors.requireNonAlphanumeric">
                                    {{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                                <li [hidden]="!control.errors.requiredLength">
                                    {{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}
                                </li>
                            </ul>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>

                <nz-form-item *ngIf="!setRandomPassword" class="mb-md">
                    <nz-form-label nzFor="PasswordRepeat" [nzRequired]="!user.id && !setRandomPassword">
                        {{"PasswordRepeat" | localize}}
                    </nz-form-label>
                    <nz-form-control [nzErrorTip]="passwordRepeatValidationTpl" nzHasFeedback>
                        <input nz-input name="PasswordRepeat" #PasswordRepeat="ngModel"
                            [(ngModel)]="userPasswordRepeat" placeholder="{{'PasswordRepeat' | localize}}"
                            type="password" validateEqual="Password" reverse="false"
                            [required]="!user.id && !setRandomPassword" maxlength="32"
                            [requireDigit]="passwordComplexitySetting.requireDigit"
                            [requireLowercase]="passwordComplexitySetting.requireLowercase"
                            [requireUppercase]="passwordComplexitySetting.requireUppercase"
                            [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                            [requiredLength]="passwordComplexitySetting.requiredLength" validateEqual="Password"
                            reverse="false">
                        <ng-template #passwordRepeatValidationTpl let-control>
                            <ul *ngIf="control.errors">
                                <li [hidden]="!control.errors.requireDigit">
                                    {{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                                <li [hidden]="!control.errors.requireLowercase">
                                    {{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                                <li [hidden]="!control.errors.requireUppercase">
                                    {{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                                <li [hidden]="!control.errors.requireNonAlphanumeric">
                                    {{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                                <li [hidden]="!control.errors.requiredLength">
                                    {{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}
                                </li>
                                <li [hidden]="control.valid">{{"PasswordsDontMatch" | localize}}</li>
                            </ul>
                        </ng-template>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-control>
                        <nz-checkbox-wrapper>
                            <div nz-col><label nz-checkbox name="ShouldChangePasswordOnNextLogin"
                                    [(ngModel)]="user.shouldChangePasswordOnNextLogin">{{"ShouldChangePasswordOnNextLogin" | localize}}</label>
                            </div>
                            <div nz-col><label nz-checkbox name="SendActivationEmail"
                                    [(ngModel)]="sendActivationEmail">{{"SendActivationEmail" | localize}}</label></div>
                            <div nz-col><label nz-checkbox name="Active"
                                    [(ngModel)]="user.isActive">{{"Active" | localize}}</label></div>
                            <div *ngIf="isTwoFactorEnabled">
                                <label nz-checkbox name="IsTwoFactorEnabled"
                                    [(ngModel)]="user.isTwoFactorEnabled">{{"IsTwoFactorEnabled" | localize}}</label>
                            </div>
                            <div *ngIf="isLockoutEnabled">
                                <label nz-checkbox name="IsLockoutEnabled"
                                    [(ngModel)]="user.isLockoutEnabled">{{"IsLockoutEnabled" | localize}}</label>
                            </div>
                        </nz-checkbox-wrapper>
                    </nz-form-control>
                </nz-form-item>
            </nz-tab>
            <nz-tab [nzTitle]="roleTitleTpl">
                <ng-template #roleTitleTpl>
                    <nz-badge [nzCount]="getAssignedRoleCount()">
                        <i nz-icon nzType="medicine-box"></i>
                        <span>
                            {{'Roles' | localize}}
                        </span>
                    </nz-badge>
                </ng-template>
                <nz-row>
                    <nz-col class="mb-md" nzSpan="6" *ngFor="let role of roles">

                        <label nz-checkbox [(ngModel)]="role.isAssigned" [name]="role.roleName">
                            {{role.roleDisplayName}}
                        </label>

                    </nz-col>
                </nz-row>
            </nz-tab>
            <nz-tab [nzTitle]="organizationUTitleTpl">
                <ng-template #organizationUTitleTpl>
                    <i nz-icon nzType="share-alt"></i>{{'OrganizationUnits' | localize}}
                </ng-template>
                <organization-unit-tree #organizationUnitTree></organization-unit-tree>
            </nz-tab>
        </nz-tabset>
    </fieldset>

    <div class="modal-footer">
        <button nz-button [nzType]="'default'" type="button" (click)="close($event)" [disabled]="saving">
            {{"Cancel" | localize}}
        </button>
        <button nz-button [nzType]="'primary'" type="submit" [disabled]="!createOrEditModalForm.form.valid || saving"
            [nzLoading]="saving">
            <i nz-icon nzType="save" *ngIf="!saving"></i> {{"Save" | localize}}
        </button>
    </div>

</form>